import React from 'react';
import { inject, observer } from 'mobx-react';
import { Table, Radio, Icon, Spin } from 'antd';
import { WeaSelect, WeaEchart, WeaLocaleProvider } from 'ecCom';
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
import { renderAlertPage, getCurrentHeight } from '../../../util/Util';
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核结果分析-按组织
 * jiansong 2019/7/3
 */
@inject("scoreReportListStore")
@observer
export default class ScoreReportList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      _height: getCurrentHeight(),
    }
    this.store = this.props.scoreReportListStore;
  }

  render() {
    const { tableDataList, hasScore, monthData, moreColumns, year, yearDatas, month, loading, showCharts, chartOption, selectedRowKeys, onSelectChange } = this.store;
    if (!hasScore) return renderAlertPage('<span style="color:red">' + getLabel('508762', '请先在考核设置中对分数段进行设置，再进行查询') + '</span>','','','',this.props.ecId || '');
    let { _height } = this.state;

    const columns = [
      {
        title: getLabel('33553', '分部'), dataIndex: 'showname', key: 'showname', width: 240,
        render: (text, record) =>
          <div className="wea-workrelate-table-inlineblock">
            {record.sub ?
              <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@dlqze1@sub${record.id}`} type="home" className="wea-workrelate-table-i" />
              : <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@77e9x8@dept${record.id}`} type="folder" className="wea-workrelate-table-i" />
            }
            <div title={text} className="wea-workrelate-table-mleft">{text}</div>
          </div>
      }
    ];
    moreColumns.map((item, index) => {
      columns.push({
        title: <span title={item.title}>{item.gardename}</span>, align: 'center',
        dataIndex: 'l' + index, width: 100,
        render: text => text,
      })
    });
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rm0cax`} spinning={loading}>
        {
          showCharts ?
            <div style={{ width: '100%', height: _height - 100, padding: '10px' }}>
              <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@l8xrqf`} ref="chart" option={chartOption} useDefault={false} />
            </div>
            :
            <div className="wea-workrelate-performance-scoreReport">
              <div className='year-date'>
                <span>
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@hcaufs`}
                    options={yearDatas}
                    value={year}
                    onChange={(val) => this.yearChange(val)}
                  />
                  <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@dbg1x1`}
                    onChange={(e) => this.monthChange(e.target.value)}
                    defaultValue={String(month)}
                    style={{ verticalAlign: "bottom" }}>
                    {
                      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(i => {
                        return (<RadioButton ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@p9ifwd@month${i}`} value={i.toString()}>{monthData[i - 1]}</RadioButton>)
                      })
                    }
                  </RadioGroup>
                </span>
                {/* <span>
                  {titlename}
                </span> */}
              </div>
              <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@ef3yl5`}
                columns={columns}
                bordered={true}
                scroll={{ x: '100%', y: _height - 230 }}
                dataSource={tableDataList}
                className="wea-workrelate-antd-table"
                rowSelection={{
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                }}
                pagination={false}
              />
            </div>
        }
      </Spin>
    )
  }

  //年份改变
  yearChange(year) {
    this.store.year = year;
    this.store.getScoreReportListData();
  };

  //月份改变
  monthChange(month) {
    this.store.month = month;
    this.store.getScoreReportListData();
  };

};